<template>
    <el-container class="home">
        <el-header height="50px">
            <top-header></top-header>
        </el-header>
        <el-container class="container">
            <el-aside width="auto;" style="position:relative;">
                <left-nav></left-nav>
            </el-aside>
            <el-main>
                <div class="avPageConten">
                    <tab-control v-if="is_show_tab" :tabs="threeMenusMap" class="tab"></tab-control>
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive&&$store.state.refresh"></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive&&$store.state.refresh"></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import TopHeader from '@/components/home/top-header.vue'
import LeftNav from '@//components/home/left-nav.vue'
import bus from "@/common/js/bus.js"

export default {
    components: {
        TopHeader,
        LeftNav
    },
    name: "home",
    data() {
        return {
            secondChildren: [],
        }
    },
    computed: {
		is_show_tab() {
            let threeMenusMap = this.$store.getters.threeMenusMap;
            let parent = threeMenusMap && threeMenusMap[this.$route.name] && threeMenusMap[this.$route.name].parent;
            if (parent) {
                // console.log('=======>', threeMenusMap[parent])
                return threeMenusMap[parent].is_show_tab === '1';
            }
            return false
        },
        threeMenusMap() {
            let threeMenusMap = this.$store.getters.threeMenusMap;
            let parent = threeMenusMap && threeMenusMap[this.$route.name] && threeMenusMap[this.$route.name].parent;
            if (this.secondChildren && this.secondChildren.length > 0) {
                return this.secondChildren;
            }
            if (parent) {
                return threeMenusMap[parent].tabs;
            } else {
                return false
            }
        }
    },
    created() {
        const tag = [...document.getElementsByTagName('meta')].find(item => item.name === "viewport")
        tag.content = 'width=1680,initial-scale=1.0,maximum-scale=1.0'
        bus.$on('inPageMenus', (res) => {
            // console.log('res===>', res)
            if (res) {
                this.secondChildren = res;
            } else {
                this.secondChildren = [];
            }
        })
    },
    mounted() { 
        // console.log('=======>>mounted') 
    },
}
</script>

<style lang="scss" scoped>
@import "@/common/scss/variable.scss";
.home {
    height: 100%;
    /deep/ .el-header {
        padding-left: 0;
        padding-right: 0;
        height: 50px;
    }
}
.container {
    height: calc(100% - 50px);
}
/deep/.el-main {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}
/deep/.el-aside {
    overflow: visible;
}
//抽屉样式
/deep/.el-drawer__header span {
    color: #409eff;
}
/deep/.el-drawer.rtl {
    top: 50px;
    height: auto;
    bottom: 0;
}
.avPageConten{
	height: 100%;
}
</style>